<template>
  <div class="comment">
    <h3>评论</h3>
    <form ref="form">
      <input name="nick_name" type="text" placeholder="称呼" v-model="nick_name">
      <input name="email" type="email" placeholder="邮箱" v-model="email">
      <input name="url" type="text" placeholder="网站" v-model="url">
      <textarea name="rich_text" placeholder="在这里添加你的评论哦~~" required rows="5" id="" v-model="rich_text"></textarea>
      <div class="submit" @click="submitComment">提交评论</div>
    </form>
    <div class="comment-result">
      <h3>已有xx条评论</h3>
      <ul class="comment-list">
        <li id="comment-203" class="comment-body comment-parent comment-odd">
          <div class="comment-author">
            <span><img class="avatar"
                       src="https://secure.gravatar.com/avatar/0e17d3ec8d6fbbfce870d97b943ceef3?s=100&amp;r=G&amp;d="
                       alt="Rinvay" width="100" height="100"></span>
            <cite class="fn"><a href="javascript:;" rel="external nofollow" target="_blank">Rinvay</a></cite>
          </div>
          <div class="comment-reply">
            <a href="javascript:;" rel="nofollow"
               onclick="return TypechoComment.reply('comment-203', 203);">回复</a></div>
          <div class="comment-meta">
            <a href="javascript:;">
              <time datetime="2018-07-31T11:19:19+08:00">3 天前</time>
            </a>
          </div>
          <div class="comment-content">
            <p>超棒！！学习了🙃</p>
          </div>
          <div class="comment-children" itemprop="discusses">
            <ol class="comment-list">
              <li id="comment-204" class="comment-body comment-child comment-level-odd comment-odd comment-by-author">
                <div class="comment-author">
                  <span><img class="avatar"
                             src="https://secure.gravatar.com/avatar/06a13f21935c60262f898cf45c8aaa36?s=100&amp;r=G&amp;d="
                             alt="Bin" width="100" height="100"></span>
                  <cite class="fn"><a href="javascript:;" rel="external nofollow" target="_blank">Bin</a></cite>
                </div>
                <div class="comment-reply">
                  <a href="javascript:;" rel="nofollow"
                     onclick="return TypechoComment.reply('comment-204', 204);">回复</a></div>
                <div class="comment-meta">
                  <a href="javascript:;">
                    <time datetime="2018-07-31T11:24:12+08:00">3 天前</time>
                  </a>
                </div>
                <div class="comment-content">
                  <p><span class="comment-reply-author">@Rinvay</span> 博主写的确实很棒呢</p>
                </div>
              </li>
              <li id="comment-205" class="comment-body comment-child comment-level-odd comment-even">
                <div class="comment-author">
                  <span><img class="avatar"
                             src="https://secure.gravatar.com/avatar/0e17d3ec8d6fbbfce870d97b943ceef3?s=100&amp;r=G&amp;d="
                             alt="Rinvay" width="100" height="100"></span>
                  <cite class="fn"><a href="javascript:;" rel="external nofollow"
                                      target="_blank">Rinvay</a></cite>
                </div>
                <div class="comment-reply">
                  <a href="javascript:;" rel="nofollow"
                     onclick="return TypechoComment.reply('comment-205', 205);">回复</a></div>
                <div class="comment-meta">
                  <a href="javascript:;">
                    <time datetime="2018-07-31T11:47:32+08:00">3 天前</time>
                  </a>
                </div>
                <div class="comment-content">
                  <p><span class="comment-reply-author">@Bin</span> 很实用呢😀</p>
                </div>
              </li>
            </ol>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default{
  props: ['id'],
  data () {
    return {
      comment_url: this.domain + '/Essay/add_comment',
      comment_list: '',
      nick_name: '',
      rich_text: '',
      email: '',
      url: '',
      parent_id: ''
    }
  },
  methods: {
    submitComment () {
      console.log(this.nick_name)
      //      this.$http.post(this.comment_url, 'nick_name =' + this.nick_name +
      //        '&rich_text=' + this.rich_text +
      //        '&parent_id=' + this.parent_id +
      //        '&essay_id=' + this.id
      //      ).then(res => {
      //        alert(res)
      //        console.log(res)
      //      }, res => {
      //        alert('error')
      //      })
    }
  }
}
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">

</style>
